import { message, Spin } from "antd";
import React, {
    useEffect,
    useLayoutEffect,
    useCallback,
    useState,
    useMemo
} from "react";
import { connect, useDispatch } from "react-redux";
import { LgSelect, LgPaginationA, LgSwitch } from "lancoo-web-ui";
import axiosMethod from "../../../util/axios";
import "./index.scss";
import Empty from "../../../common/component/empty";
import Search from "../../../common/component/search";
import TableList from "../../../common/component/fileList";
import Scrollbars from "react-custom-scrollbars";

const columns = [
    {
        key: "index",
        width: "4%",
        textAlign: "center",
        textColor: "#999"
    },
    {
        key: "updateTitle",
        width: "25%",
        textAlign: "left",
        padding: "0 20px 0 42px",
        name: "产品"
    },
    {
        key: "path",
        width: "30%",
        textAlign: "left",
        textColor: "#999",
        padding: "0 0 0 27px",
        name: "最近一次备份文件路径"
    },
    {
        key: "time",
        padding: "0 0 0 27px",
        width: "25%",
        textColor: "#999",
        name: "备份时间"
    },
    {
        key: "operate_btn",
        width: "16%",
        textAlign: "left",
        padding: "0 0 0 40px",
        name: "操作"
    }
]
const pageNum = 10;

function BackupsReduction(props){
    let {
        sysAddrInfo,
        userInfo,
        getTextById
    } = props;
    const dispatch = useDispatch();
    const [loadVisible, setLoadVisible] = useState(false);
    const [currentUser, setCurrentUser] = useState({
        text: "全部应用",
        info: ""
    });
    const [currentKind, setCurrentKind] = useState({
        text: "全部分类",
        info: ""
    });
    const [total, setTotal] = useState(0);
    const [moduleList, setModuleList] = useState([]);
    const [keyword, setKeyword] = useState("");
    const [pageIndex, setPageIndex] = useState(1);

    const changeUser = (data) => {
        if(pageIndex !== 1){
            setPageIndex(1);
        }
        setCurrentUser(data);
    }
    const changeKind = (data) => {
        if(pageIndex !== 1){
            setPageIndex(1);
        }
        setCurrentKind(data);
    }

    const getModuleList = useCallback(()=>{
        setLoadVisible(true);
        let arr = [
            {
                productName: "萨芬大是大非",
                icon: "",
                path: `C:\\Program Files (x86)\\LgSoftWAN\\fvs\\Mode`,
                time: "2019-01-02 12:00"
            },
            {
                productName: "士大夫撒分",
                icon: "",
                path: "C:\\Program Files (x86)\\LgSoftWAN\\fvs\\Model",
                time: "2019-01-02 12:00"
            },
        ]
        setModuleList(arr)
        // axiosMethod({
        //     type: "get",
        //     url: "api/module/management/list/module",
        //     noCheck: true,
        //     body: {
        //         userId: userInfo.userId,
        //         schoolId: userInfo.schoolId,
        //         schoolLevel: userInfo.schoolLevel,
        //         userType: currentUser.info,
        //         moduleType: currentKind.info,
        //         // status: currentState.info,
        //         keyword,
        //         // applyScene: currentType.info,
        //         pageSize: pageNum,
        //         pageNum: pageIndex
        //     },
        //     callback: function(res, info){
        //         setLoadVisible(false);
        //         if(!res || info.code !== "200"){
        //             return;
        //         }
        //         setTotal(info.total);
        //         setModuleList(res);
        //     }
        // });
    }, [userInfo, currentUser, currentKind, pageIndex, keyword]);

    const ModuleListDom = useMemo(()=>{
        let list = JSON.parse(JSON.stringify(moduleList));
        list.forEach((item, index)=>{
            item.updateTitle = (
            <div className="table-update-title" key={index}>
                <span className="module-icon" style={{
                    backgroundImage: `url('${item.moduleLogoUrl}')`
                }}></span>
                <p className="module-title" title={item.productName}>{item.productName}</p>
            </div>
           )
           item.operate_btn = (
            <div className="table-btn-group">
                <span className="blue-btn" onClick={()=>{
                    dispatch({
                        type: "SET_BACKUPSHISTORYINFO",
                        data: {
                            visible: true,
                            data: item
                        }
                    })
                }}>历史记录</span>
            </div>
           )
        })
        return (
            <TableList
            tableHeader={columns}
            pageIndex={pageIndex}
            pageSize={pageNum}
            // getList={changeCount}
            scrollbar={false}
            emptyText={keyword? "搜素结果为空": ""}
            data={list}
            ></TableList>
        )
    }, [keyword, moduleList, getTextById, pageIndex, dispatch]);

    useEffect(()=>{
        getModuleList();
    }, [getModuleList]);

    return (
        <div className="backups-reduction-page">
            <div className="page-top-option">
                <div>
                    <LgSelect
                    datalist={[
                        {
                            text: "全部应用类型",
                            info: ""
                        },
                        {
                            text: "网页",
                            info: "1"
                        },
                        {
                            text: "客户端",
                            info: "2"
                        },
                        {
                            text: "App",
                            info: "3"
                        },
                        {
                            text: "小程序",
                            info: "4"
                        },
                        {
                            text: "独立小程序",
                            info: "5"
                        }
                    ]}
                    SelectOption={changeKind}
                    value={currentKind.text}
                    size={"normal"}
                    ></LgSelect>
                    <LgSelect
                    className="type-select"
                    datalist={[
                        {
                            text: "全部可访问用户身份",
                            info: ""
                        },
                        {
                            text: "管理员",
                            info: "0"
                        },
                        {
                            text: "教师",
                            info: "1"
                        },
                        {
                            text: "学生",
                            info: "2"
                        },
                        {
                            text: "家长",
                            info: "3"
                        },
                        {
                            text: "其他职工",
                            info: "11"
                        },
                    ]}
                    SelectOption={changeUser}
                    value={currentUser.text}
                    size={"normal"}
                    ></LgSelect>
                    <span className="list-num">共<span>{total}</span>个应用</span>
                </div>
                <Search placeholder="搜索产品名称..." searchMethod={(value)=>{
                    if(pageIndex !== 1){
                        setPageIndex(1);
                    }
                    setKeyword(value)
                }} />
            </div>
                {ModuleListDom}
                {
                    total > pageNum?
                    <div className="menu_pagination">
                        <LgPaginationA
                        total={Math.ceil(total/pageNum)}
                        size="normal"
                        currentPage={pageIndex}
                        onChangePage={(value)=>{
                            setPageIndex(value);
                        }}
                        errorPage={() => {}}
                        ></LgPaginationA>
                    </div>:
                    ""
                }
        </div>
    )
}
const mapToProps = (state) => {
    return {
        sysAddrInfo: state.sysAddrInfo,
        userInfo: state.userInfo,
        getTextById: state.getTextById
    }
}
export default connect(mapToProps)(BackupsReduction);